<template>
	<!-- 历史记录页面 -->
	<!-- 赵笛 2023年4月11日 -->
	<view class="parent-box">
		<view class="view-box" >
			<u-tabs :list="[{name:'商品记录'},{name:'DIY记录'}]" style="margin-left:28%" @click="tabClick"></u-tabs>
		</view>
		<view class="view-box" v-if="commodityList.length===0&&itemType===0">
			<u-empty
				mode="car"
				icon="http://cdn.uviewui.com/uview/empty/car.png"
				text="暂无商品浏览记录"
			>
			</u-empty>
		</view>
		<view class="view-box" v-if="diyList.length===0&&itemType===1">
			<u-empty
				mode="car"
				icon="http://cdn.uviewui.com/uview/empty/car.png"
				text="暂无DIY浏览记录"
			>
			</u-empty>
		</view>
		<!-- 商品列表 -->
		<view class="view-box" v-for="commodity in commodityList" v-show="itemType===0">
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="4">
					<u--image :showLoading="true" 
					:src="'http://101.43.223.224:8765/image/getImageById?id='+commodity.imageId.split(',')[0]" 
					width="100px"
					height="100px" 
					radius='10'
					@click="click"></u--image>
				</u-col>
				<u-col span="8" class="padding-none">
					<div class="text-title">{{commodity.commodityName}}</div>
					<div class="text-light">{{commodity.back}}</div>
					<div class="text-price">¥{{commodity.price}}</div>
					<div class="text-price" >
						<div style="width:80px;margin-left:10px" class="right">
							<u-button
								style="width:100%"
								type="info"
								shape="circle"
								text="删除记录"
								size="small"
								:plain="true"
								@click="deleteHistory(commodity.id)"></u-button>
						</div>
						<div style="width:80px;" class="right">
							<u-button
								style="width:100%"
								color="#3CCCA6"
								shape="circle"
								text="加入购物车"
								size="small"
								@click="addToShoppingCart(commodity.id)"></u-button>
						</div>
					</div>
				</u-col>
			</u-row>
		</view>
		<!-- diy列表 -->
		<view class="view-box" v-for="diy in diyList"  v-show="itemType===1">
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="4">
					<u--image :showLoading="true" 
					:src="'http://101.43.223.224:8765/image/getImageById?id='+diy.diyImageId.split(',')[0]" 
					width="100px"
					height="100px" 
					radius='10'></u--image>
				</u-col>
				<u-col span="8" class="padding-none">
					<div class="text-title">{{diy.diyName}}</div>
					<div class="text-light">{{diy.diyDetails}}</div>
					<div class="text-price">¥{{diy.diyPrice}}</div>
					<div class="text-price" >
						<div style="width:80px;margin-left:10px" class="right">
							<u-button
								style="width:100%"
								type="info"
								shape="circle"
								text="删除记录"
								size="small"
								:plain="true"
								@click="deleteHistory(diy.id)"></u-button>
						</div>
						<div style="width:80px;" class="right">
							<u-button
								style="width:100%"
								color="#3CCCA6"
								shape="circle"
								text="加入购物车"
								size="small"
								@click="addToShoppingCart(diy.id)"></u-button>
						</div>
					</div>
				</u-col>
			</u-row>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				//登录用户id
				userId:0,
				//商品列表
				commodityList:[],
				//diy列表
				diyList:[],
				//商品
				itemType:0,
			}
		},
		methods: {
			//点击tab时传入下标
			tabClick(item){
				this.itemType = item.index
				this.getUserHistoryByUserId()
			},
			//根据当前用户查找浏览记录
			getUserHistoryByUserId(){
				this.$myRequest({
					url: '/commodity/detail/getUserHistoryByUserId',
					data: {
						userId:this.userId,
						itemType:this.itemType
					}
				}).then(res => {
					if(res.data.flag){
						if(this.itemType===0){
							//是商品列表
							this.commodityList = res.data.data
						}else{
							//是diy列表
							this.diyList = res.data.data
						}
					}else{
						this.commodityList = []
						this.diyList = []
					}
				})
			},
			//删除历史记录
			deleteHistory(commodityId){
				this.$myRequest({
					url: '/commodity/detail/deleteHistory?commodityId='
					+ commodityId + '&userId='
					+ this.userId + '&itemType='
					+ this.itemType,
					method:'DELETE',
				}).then(res => {
					if(res.data.flag){
						//删除成功
						uni.showToast({
							icon: 'success',
							title: '删除成功',
							// 显示时长时间为3秒
							duration: 3000,
						})
						this.getUserHistoryByUserId()
					}else{
						//删除失败
						uni.showToast({
							icon: 'warning',
							title: '删除失败',
							// 显示时长时间为3秒
							duration: 3000,
						})
						this.getUserHistoryByUserId()
					}
				})
			},
			//加入购物车
			addToShoppingCart(commodityId){
				var commodityInfo={
					userId:this.userId,
					commodityId:commodityId,
					businessName:'乐工坊',
					number:1,
					// commoditySpec:this.specChooseList.filter(item=> item).join(','),
					returnAndExchangePolicy:'7天无理由退换',
					//商品
					isNoDiy:0
				}
				//将商品加入购物车
				this.$myRequest({
					url: '/shoppingCart/saveShoppingCart',
					method:'POST',
					data: commodityInfo
				}).then(res => {
					if(res.data.flag){
						//加入购物车成功
						uni.showToast({
							icon: 'success',
							title: '加入购物车成功',
							// 显示时长时间为3秒
							duration: 3000,
						})
					}else{
						//加入购物车失败
						uni.showToast({
							icon: 'error',
							title: '加入购物车失败',
							// 显示时长时间为3秒
							duration: 3000,
						})
					}
				})
			}
		},
		onLoad() {
			this.userId = wx.getStorageSync('user').id
			this.getUserHistoryByUserId()
		}
	}
</script>

<style>
/**
	 * 公共样式 ↓
	 */
	.parent-box{
		height:100%;
		background-color: #f5f5f5;
	}
	.left{
		float:left;
	}
	.right{
		float:right;
	}
	.text-title {
		//文字标题样式
		font-size: 14px;
		color: #333333;
		font-weight: bold;
	}

	.text-dark {
		//深色文字样式
		font-size: 12px;
		color: #666666;
	}

	.text-light {
		//浅色文字样式
		font-size: 12px;
		color: #999999;
	}
	.text-price{
		font-size: 18px;
		color: #E06181;
		font-weight: bold;
	}
	.text-center {
		//居中文字样式
		text-align: center;
	}
	.view-box {
		margin:0 10px ;
		border-radius: 10px;
		line-height: 24px;
		background: #fff;
		padding: 16px 10px;
		margin-bottom: 6px;
	}
	.padding-none{
		padding:0
	}
	

	/**
	 * 公共样式 ↑
	 */
</style>
